<template>
    <div class="edit">
        <navigator 
        :back="true" 
        :title="'修改地址'"
        :btn-show="true" 
        :btn-text="'删除'" 
        :btn-style="{ color: 'red' }" 
        @click="del" />
        <van-address-edit 
        :area-list="areaList" 
        show-set-default 
        :address-info="addressInfo" 
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']" 
        @save="onSave" />
    </div>
</template>
<script>
// 引入 获取地址详情的接口
import {
    getAddressDesc,
    // 删除地址的接口
    deleteAddressDesc,
    // 修改地址
    editAddress
} from '@/api'
import navigator from '@/components/navigator.vue';
// 引入vant官方的 地址选择数据
import { areaList } from '@vant/area-data';
export default {
    methods: {
        onSave({
            name, //姓名
            tel, //手机号
            province, //省份
            city, //城市
            county, //区县
            addressDetail, //详细地址
            isDefault //是否默认
        }) {
            // 重新赋值
            let obj = {
                name,
                phone: tel,
                a_provice: province,
                a_city: city,
                a_code: county,
                a_desc: addressDetail,
                is_select: Number(isDefault),
                address_id: this.address_id
            }
            // 添加地址
            editAddress(obj).then(res => {
                if (res.data.code === 1) {
                    this.$toast('修改成功');
                    setTimeout(() => {
                        this.$router.back()
                    }, 800);
                } else {
                    this.$toast(res.data.msg);
                }
            })
        },
        del() {
            this.$dialog({
                title: '提示',
                message: '删除地址后不可恢复，确认删除吗？',
                showCancelButton: true
            }).then(res => {
                // 删除地址
                deleteAddressDesc({
                    address_id: this.address_id
                }).then(res => {
                    if (res.data.code === 1) {
                        this.$toast('删除成功');
                        setTimeout(() => {
                            this.$router.back()
                        }, 800);
                    } else {
                        this.$toast(res.data.msg)
                    }
                })
            }).catch(err => {
                // console.log(err);
            })
        },
        getDesc(address_id) {
            // 获取地址详情
            getAddressDesc({ address_id }).then(res => {
                if (res.data.code == 1) {
                    let data = res.data.result[0];
                    this.addressInfo = {
                        name: data.name,
                        tel: data.phone,
                        province: data.a_provice,
                        city: data.a_city,
                        county: data.a_code,
                        addressDetail: data.a_desc,
                        isDefault: Boolean(data.is_select)
                    }
                } else {
                    this.$toast(res.data.msg);
                    setTimeout(() => {
                        this.$router.back();
                    }, 800);
                }
            })

        }
    },
    data() {
        return {
            address_id: null,
            searchResult: [],
            areaList,
            addressInfo: {
                name: '',
                tel: '',
                province: '',
                city: '',
                county: '',
                addressDetail: '',
                isDefault: false
            }
        }
    },
    created() {
        // console.log(this.$route.query.address_id);
        this.getDesc(this.$route.params.address_id);
        this.address_id = this.$route.params.address_id;
    },
    components: {
        navigator
    }
}
</script>